@import "../common/rem";
@import "../common/variables";
@import "../less/style";
@import "../common/mixins";
@import "../less/util";

#OKRsDetail {
    .main {
        .px2rem(bottom, 100);
    }
    .okrs-detail {
        .okrs-title {
            .px2rem(padding-left, 30);
            .px2rem(padding-right, 30);
            .px2rem(padding-top, 24);
            .px2rem(padding-bottom, 24);
            .px2rem(margin-bottom, 20);
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            .title-content {
                .px2px(font-size, 34);
                .px2rem(margin-bottom, 4);
                color: #292F33;
                font-weight: 400;
            }
            .title-other {
                .px2px(font-size, 28);
                color: #6A6D70;
                font-weight: 200;
                .deptName {
                    .px2rem(margin-right, 45);
                }
            }
        }
        .okrs-keyresult {
            background-color: #fff;
            border-bottom: 1px solid #ddd;
            .key-result-title {
                .px2px(font-size, 30);
                .px2rem(height, 80);
                .px2rem(line-height, 80);
                .px2rem(margin-left, 30);
                color: #8899A6;
                border-bottom: 1px solid #DDD;
                .occupy {
                    .px2px(font-size, 26);
                    .px2rem(margin-left, 20);
                    color: #FA6771;
                }

                .okrs-keyresult-icon{
                    display: inline-block;
                    border-radius: 50%;
                    background-color: #67C1FA;
                    .px2rem(height,45);
                    .px2rem(width,45);
                    text-align: center;
                    .px2rem(line-height,48);
                    .icon-keyresult{
                        color: white;
                    }
                }
            }
            .key-result-list {
                ul {
                    padding: 0;
                    .result {
                        .px2px(font-size, 30);
                        .px2rem(padding-top, 34);
                        .px2rem(padding-bottom, 34);
                        .px2rem(padding-right, 60);
                        .px2rem(margin-left, 30);
                        line-height: 1.5;
                        list-style: none;
                        color: #292F33;
                        border-bottom: 1px solid #DDD;
                        .occupy {
                            position: relative;
                            .px2rem(top, -4);
                            background-color: #FEE571;
                            color: #766101;
                            .px2px(font-size, 22);
                            .px2rem(border-radius, 6);
                            .px2rem(padding-top, 4);
                            .px2rem(padding-bottom, 4);
                            .px2rem(padding-left, 10);
                            .px2rem(padding-right, 10);
                            .px2rem(margin-right, 20);
                        }
                    }
                    .result-content {
                        display: block;
                        width: 100%;
                    }
                    .right-arrow {
                        display: block;
                        .px2rem(margin-left, 10);
                        .px2rem(right, 30);
                        .px2rem(font-size, 30);
                        color: #aaa;
                    }
                    .box {
                        display: -moz-box;
                        display: -webkit-box;
                        display: box;
                    }
                    .box-center {
                        -moz-box-align: center;
                        -webkit-box-align: center;
                        box-align: center;
                    }
                    .box-horizontal {
                        -moz-box-orient: horizontal;
                        -webkit-box-orient: horizontal;
                        box-orient: horizontal;
                    }
                    li:last-child {
                        .px2rem(padding-left, 30);
                        margin-left: 0;
                    }

                }
            }
        }
    }
    .okrs-bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #FFF;
        border-top: 1px solid #DDD;
        .px2rem(height, 100);
        .px2rem(font-size, 32);
        .keyresult-add, .target-edit {
            position: relative;
            .px2rem(top, 24);
            color: #FA6771;
            display: inline-block;
            text-align: center;
            border-right: 1px solid #DDD;
        }
        .keyresult-add {
            width: 44%;
        }
        .target-edit {
            width: 28%;
        }
        .target-del {
            position: relative;
            .px2rem(top, 24);
            color: #8899A6;
            display: inline-block;
            text-align: center;
            width: 28%;
        }
    }
}